<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat</title>
</head>
<body>
    <h1 style="text-align: center;">WXSB CHAT</h1>
    <div id="content" style="height: 500px;overflow: auto; border: 1px solid black;"></div>
    <br>
    <div style="text-align: right;">
        <!-- method 1 html -->
        msg: <input type="text" id="msg" style ="width: 50%;">    <input type="button" value="send" onclick="sendMsg()">
        <!-- method 2 html -->
        <!-- msg: <input type="text" id="msg" style ="width: 50%;">    <input type="button" value="send" id="btn11"> -->
    </div>

    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- method 2 js -->
    <!-- <script>
        console.log('run 0');
        var ws = new WebSocket('ws://127.0.0.1:8888/chat');

        ws.onmessage = function(e) {
            $('#content').append('<p>' + e.data + '</p>');
        }

        $(document).ready(
            function() {
                $("#btn11").click(            
                    function sendMsg() {
                        var msg = $('#msg').val();
                        ws.send(msg);
                        $('#msg').val('');
                    }
                );
            }
        );
    </script> -->

    <!-- method 1 js -->
    <script>
        console.log('run 1');
        var ws = new WebSocket('ws://127.0.0.1:8888/chat');
        
        function sendMsg() {
            var msg = $('#msg').val();
            ws.send(msg);
            $('#msg').val('');

            // $.ajax({
            //     type: 'POST',
            //     url: '/chat',
            //     data: {
            //         msg: msg
            //     },
            //     success: function(data){
            //         console.log(data)
            //     },
            //     error: function() {
            //         alert('error');
            //     }
            // });
        };

        ws.onmessage = function(e) {
            $('#content').append('<p>' + e.data + '</p>')
        }
    </script>

</body>
</html>
